<!-- 自定义表单 -->
<template>
    <view class="my-form" :style="{ '--color': color, '--colors': colors }">
        <view v-for="(form, index_f) in orderData" :key="index_f" v-if="orderData.length > 0">
            <!-- 表单详情介绍 -->
            <view class="orderInfo" v-if="form.info && showInfo == 'true'">
                <view class="topMsg" v-if="form.info.show_info == 1">
                    <image v-if="form.info.wzn_act_img" :src="$imgUrls(form.info.wzn_act_img)" mode="widthFix"></image>
                    <view class="infoContent">
                        <view class="infoName">{{ form.info.order_name }}</view>
                        <view class="info_item">
                            {{ form.info.order_title }}时间：{{ form.info.order_starttime }} ~
                            {{ form.info.order_endtime }}
                        </view>
                        <view class="info_item">联系电话：{{ form.info.order_tel }}</view>
                        <view class="info_item">地址：{{ form.info.order_address }}</view>
                        <!-- <view class="info_s">{{form.info.order_title}}说明：</view> -->
                    </view>
                </view>
                <mp-html :content="form.info.order_content" lazy-load scroll-table selectable use-anchor show-with-animation />
            </view>
            <view class="dowload_file_box flex-box align-center" v-if="form.info.attachment_url">
                <view class="dowload_file" @click="openFile(form.info.attachment_url)">
                    <text class="thmeBg">预览{{ form.info.attachment_name }}</text>
                </view>
                <view class="dowload_file" @click="copy_text(baseUrl + form.info.attachment_url)">
                    <text class="thmeBg">复制附件地址</text>
                </view>
            </view>
            <view class="photoes" v-if="form.info.imgs">
                <template v-if="form.info.imgs.length == 1">
                    <image
                        class="img_1"
                        @click="previewImage(g, form.info.imgs)"
                        :src="$imgUrls(img)"
                        mode="aspectFill"
                        :show-menu-by-longpress="true"
                        v-for="(img, g) in form.info.imgs"
                        :key="g"
                        v-if="g == 0"
                    ></image>
                </template>
                <template v-else>
                    <image
                        class="img_2"
                        @click="previewImage(g, form.info.imgs)"
                        :src="$imgUrls(img)"
                        mode="aspectFill"
                        :show-menu-by-longpress="true"
                        v-for="(img, g) in form.info.imgs"
                        :key="g"
                    ></image>
                </template>
            </view>
            <!-- 表单-->
            <view class="reserve-box">
                <view class="reserve white">
                    <view class="reserve-title">{{ form.info.order_name }}</view>
                    <view class="form">
                        <block v-for="(ord, index) in form.data" :key="index">
                            <!-- 1、单行文本框 -->
                            <view class="text_input align-center" v-if="ord.config_type == 1 && ord.config_state == 1 && !ord.disable">
                                <text class="Required" v-if="ord.config_must == 1 || ord.config_name == '用户姓名' || ord.config_name == '联系电话'">*</text>
                                <text class="isKey">{{ ord.config_name }}：</text>
                                <input :placeholder="ord.place ? ord.place : '请输入' + ord.config_name" v-model="ord.config_content" class="form-ipt" type="text" placeholder-class="pla" />
                            </view>
                            <!--2、选择日期  3-->
                            <view class="drop_select" v-if="ord.config_type == 3 && ord.config_state == 1 && !ord.disable">
                                <timepicker showType="date" @btnConfirm="btnConfirm1" :isAll="false" :index1="index" :index2="index_f" @btnCancel="btnCancel">
                                    <view class="picker">
                                        <text class="Required" v-if="ord.config_must == 1">*</text>
                                        <text class="isKey">{{ ord.config_name }}：</text>
                                        <text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : ord.config_pla }}</text>
                                        <text class="icon-xiasanjiaoxing iconfont"></text>
                                    </view>
                                </timepicker>
                            </view>

                            <!-- 3、验证码 -->
                            <view class="Veri_Code align-center" v-if="form.info.verification == 1 && ord.config_name == '联系电话'">
                                <view class="inputBox flex-box text_input">
                                    <text class="Required">*</text>
                                    <input placeholder="请输入验证码：" type="number" v-model="form.info.verCode" />
                                </view>
                                <button class="sendCode thmeBg" :style="{ '--color': color }" @click="verifCode2(index_f, form.info.order_id)" :disabled="form.info.btnDisabled">
                                    {{ form.info.btnTxt }}
                                </button>
                            </view>
                            <!-- 4、 选择时间-->
                            <view class="drop_select" v-if="ord.config_type == 7 && ord.config_state == 1 && !ord.disable">
                                <timepicker showType="minuteToSecond" @btnConfirm="btnConfirm" :isAll="false" :index1="index" :index2="index_f" id="mypicker" @btnCancel="btnCancel" ref="mypicker">
                                    <view class="picker">
                                        <text class="Required" v-if="ord.config_must == 1">*</text>
                                        <text class="isKey">{{ ord.config_name }}：</text>
                                        <text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : time }}</text>
                                        <text class="icon-xiasanjiaoxing iconfont"></text>
                                    </view>
                                </timepicker>
                            </view>
                            <!-- 5、选择地址 -->
                            <view class="drop_select" v-if="ord.config_type == 6 && ord.config_state == 1 && !ord.disable">
                                <view class="picker" @click="showAddPicker(index, index_f)">
                                    <text class="Required" v-if="ord.config_must == 1">*</text>
                                    <text class="isKey">{{ ord.config_name }}：</text>
                                    <text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : ord.pickered }}</text>
                                    <text class="icon-xiasanjiaoxing iconfont"></text>
                                </view>
                            </view>
                            <!-- 6、下拉框 -->
                            <view class="drop_select" v-if="ord.config_type == 2 && ord.config_state == 1 && !ord.disable" @click="showSelect(index, index_f)">
                                <picker mode="selector" :range="ord.options" :data-indexf="index_f" :data-index="index" @change="selectorChange" style="width: 100%">
                                    <view class="picker">
                                        <text class="Required" v-if="ord.config_must == 1">*</text>
                                        <text class="isKey">{{ ord.config_name }}：</text>
                                        <text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : '请选择' + ord.config_name }}</text>
                                        <text class="icon-xiasanjiaoxing iconfont"></text>
                                    </view>
                                </picker>
                            </view>
                            <!-- 7、复选框 -->
                            <view class="mulitSelect" v-if="ord.config_type == 5 && ord.config_state == 1 && !ord.disable">
                                <view>
                                    <text class="Required" v-if="ord.config_must == 1">*</text>
                                    <text class="text-container">{{ ord.config_name }}：</text>
                                </view>
                                <view class="checkList flex">
                                    <block v-for="(check, index_check) in ord.checkList" :key="index_check">
                                        <view class="checkItem" @click="checkClick(index, index_f, index_check, check.checked, check.name)">
                                            <view class="checkIcon thmeBorder" :style="{ '--color': color }" :class="{ thmeBg: check.checked }">
                                                <text class="icon-xuanzhong iconfont"></text>
                                            </view>
                                            <text class="name">{{ check.name }}</text>
                                        </view>
                                    </block>
                                </view>
                            </view>
                            <!-- 8、单选框 -->
                            <view class="singleSelect" v-if="ord.config_type == 9 && ord.config_state == 1 && !ord.disable">
                                <text class="Required" v-if="ord.config_must == 1">*</text>
                                <text class="text-container">{{ ord.config_name }}：</text>
                                <view class="checkList flex">
                                    <block v-for="(check, index_check) in ord.checkList" :key="index_check">
                                        <view class="checkItem" @click="checkClick1(index, index_f, index_check, check)">
                                            <view class="checkIcon_" :class="{ thmeBorder: ord.config_content == check }" :style="{ '--color': color }">
                                                <text :class="ord.config_content == check ? 'thmeBg' : 'grayBg'" :style="{ '--color': color }"></text>
                                            </view>
                                            <text class="name">{{ check }}</text>
                                        </view>
                                    </block>
                                </view>
                            </view>
                            <!-- 9、上传图片 -->
                            <view class="uploadImg" v-if="ord.config_type == 8 && ord.config_state == 1 && !ord.disable">
                                <text class="Required" v-if="ord.config_must == 1">*</text>
                                <text class="isKey">{{ ord.config_name }}：</text>
                                <view class="phone-box flex-box">
                                    <view class="upBox relative" style="border: 1px solid #dcdada" v-for="(img, i) in ord.imgs" :key="i">
                                        <view class="delImg thmeBg" @click="del(index, index_f, i)" :style="{ '--color': color }">
                                            <image :src="staticUrl + '/images/jh_up/delImg.png'"></image>
                                        </view>
                                        <image class="upIcon" :src="$imgUrls(img)" mode="aspectFit"></image>
                                    </view>
                                    <view class="upBox" v-if="ord.imgEn">
                                        <image class="upIcon" :src="staticUrl + '/images/jh_up/addImg.png'" @click="selectImage(index, index_f, ord.limit)" mode="aspectFill"></image>
                                    </view>
                                </view>
                            </view>
                            <!-- 10、文本域 -->
                            <view class="areaBox color" v-if="ord.config_type == 4 && ord.config_state == 1 && !ord.disable">
                                <text class="Required" v-if="ord.config_must == 1">*</text>
                                <text class="isKey">{{ ord.config_name }}：</text>
                                <textarea class="textArea" v-model="ord.config_content" @input="areaBlur($event, index, index_f)" :placeholder="ord.plac ? ord.plac : '请输入内容...'" />
                            </view>

                            <!-- 11、 选择时间 (可配置类型)-->
                            <view class="drop_select" v-if="ord.config_type == 10 && ord.config_state == 1 && !ord.disable">
                                <timepicker
                                    :showType="ord.dateTimeType"
                                    @btnConfirm="btnConfirm2"
                                    :isAll="false"
                                    :index1="index"
                                    :index2="index_f"
                                    id="mypicker"
                                    @btnCancel="btnCancel"
                                    ref="mypicker"
                                    style="width: 100%; height: 100%"
                                >
                                    <view class="picker">
                                        <text class="Required" v-if="ord.config_must == 1">*</text>
                                        <text class="isKey">{{ ord.config_name }}：</text>
                                        <text class="flex" :class="{ isKey: ord.config_content }">{{ ord.config_content ? ord.config_content : '请选择' + ord.config_name }}</text>
                                        <text class="icon-xiasanjiaoxing iconfont"></text>
                                    </view>
                                </timepicker>
                            </view>

                            <!-- 16、人数 -->
                            <view class="text_input align-center" v-if="ord.config_type == 16 && ord.config_state == 1 && !ord.disable">
                                <text class="Required" v-if="ord.config_must == 1">*</text>
                                <text class="isKey">{{ ord.config_name }}：</text>
                                <input
                                    :placeholder="ord.place ? ord.place : '请输入' + ord.config_name"
                                    v-model="ord.config_content"
                                    class="form-ipt"
                                    type="number"
                                    placeholder-class="pla"
                                    @input="getNum"
                                />
                            </view>
                        </block>
                        <!-- <text class="wrong">{{form.info.wrongTxt}}</text> -->

                        <view class="agreementBox" @click.stop="agreement = !agreement" v-if="form.info.acknowledgeId && form.info.acknowledgeId > 0">
                            <view class="ahrNpx" :class="{ Active: agreement }">
                                <view class="iconfont icon-xuanzhong size30"></view>
                            </view>
                            <text class="acknowledgeText" @click.stop="showAgree = true">{{ form.info.acknowledgeText }}</text>
                        </view>
                        <button class="reserveNow" form-type="submit" v-if="form.info.order_id == '2147' && (form.station == 0 || !form.station)">
                            暂无{{ form.info.order_title ? form.info.order_title : '申请' }}权限
                        </button>
                        <button class="reserveNow thmeBg" v-if="form.info.price == 0" :style="{ '--color': color }" form-type="submit" @click="reserveNow(index_f, form.info.order_id, form)">
                            {{ form.info.order_title ? '立即' + form.info.order_title : '立即提交' }}
                        </button>
                        <view class="row j-sb nowBtn bgcolor" v-if="form.info.price != 0" @click="reserveNow(index_f, form.info.order_id, form)">
                            <view class="d-flex white a-center j-centert bgcolors nowLeft">
                                <text class="h6">￥</text>
                                <text class="size32">{{ form.info.price * num }}</text>
                            </view>
                            <view class="d-flex white size32 a-center j-centert bgcolor nowRigth">
                                {{ form.info.order_title ? '立即' + form.info.order_title : '立即提交' }}
                            </view>
                        </view>
                    </view>
                    <view class="color_66 text-center m-top20" @click="toRecord" v-if="!form.sncode_id">我的{{ form.info.order_title }}</view>
                </view>
            </view>
        </view>
        <view class="mask success-img-box" v-if="showSuccess" :style="{ 'padding-top': navHeight + System.statusBarHeight + 'px' }">
            <image @click="toStation" class="success-img" :src="staticUrl + '/images/station/be_station.png'" mode="widthFix"></image>
        </view>
        <!-- 选择地址组件（不能放在循环里面） -->
        <mpvue-city-picker :shixian2="shixian2" ref="mpvueCityPicker_" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"></mpvue-city-picker>

        <showModel @cancelFunc="showModal = false" v-if="showModal" type="2"></showModel>
        <empty v-if="noData" type="1" cat="4" :msg="msg"></empty>
        <!-- 	<showModel @cancelFunc='showModal1=false' v-if='showModal1' type='99' title='提交成功!' :msg='modelTitle'
		 @certain='toUrl("/pages/reserve/myRreserve")' :btn1='btn1' :btn2='btn2'></showModel> -->
        <showModel @cancelFunc="showModal1 = false" v-if="showModal1" type="99" title="提交成功!" :msg="modelTitle" @certain="certainBtn" :btn1="btn1" :btn2="btn2"></showModel>
        <view class="mask flexac f-column" @click="success_img = ''" v-if="success_img">
            <image class="viewbox5" :src="$imgUrls(success_img)" mode="aspectFit" style="height: 890rpx" @click.stop></image>
            <text class="iconfont icon-guanbi size60" @click="success_img = ''"></text>
        </view>

        <u-popup :show="showAgree" @close="showAgree = false" :round="10">
            <view class="showAgrees">
                <text class="title">{{ ordInfo.acknowledgeTitle }}</text>
                <view class="content">
                    <u-parse :content="website_article_content"></u-parse>
                </view>
                <view class="fpot">
                    <view class="btns refuse" @click="showAgree = false">拒绝</view>
                    <view class="btns agree" @click="agreeBtn">同意</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import { mapState } from 'vuex';
    var date = new Date(),
        that,
        timer = null;
    var mon = date.getMonth() + 1;
    if (mon < 10) mon = '0' + mon;
    var day = date.getDate();
    if (day < 10) day = '0' + day;
    var today = date.getFullYear() + '-' + mon + '-' + day;
    var H = date.getHours();
    var m = date.getMinutes();
    if (H < 10) H = '0' + H;
    if (m < 10) m = '0' + m;
    var time = H + ':' + m; // 当前时间
    import mpvueCityPicker from './mpvue-citypicker/mpvueCityPicker.vue';
    import timepicker from './time-picker.vue';
    import '@/js_sdk/ican_H5Api/ican-H5Api';
    export default {
        props: ['ids', 'info', 'barTitle'], //ids:表单id列表,有可能同时出现多个表单的情况  info:是否显示表单介绍  barTitle:是否修改页面标题 1修改
        components: {
            mpvueCityPicker,
            timepicker
        },
        data() {
            return {
                colors: getApp().globalData.color_aid,

                staticUrl: this.staticUrl,
                baseUrl: this.baseUrl,
                showModal: false,
                latitude: 0, //纬度
                longitude: 0, //经度
                inputValue: today,
                shixian: false,
                year: date.getFullYear(),
                month: mon,
                day: day,
                indexs: [],
                today: today, // 出生日期默认值
                orderData: [], // 表单结构
                time: time, // 当前时间
                minute: 3,
                hour: 3,
                shixian1: false,
                cityPickerValueDefault: [0, 0, 1], // 默认选择地址
                shixian2: false,
                loadingNow: false, // 图片正在上传
                list: this.ids,
                showInfo: this.info, // 是否显示表单详情
                noData: false,
                msg: '',
                showSuccess: false,
                success_img: '',
                showModal1: false,
                modelTitle: '您已成功提交，请耐心等待审核结果！',
                btn1: '确定',
                btn2: '前往查看',
                jump_pay: '',
                sncode_id: '',
                palyInfo: {}, // 获取支付信息
                num: 1,
                agreement: false, //协议
                showAgree: false,
                ordInfo: '',
                website_article_content: ''
            };
        },
        created() {
            let that = this;
            that.getList();
        },
        methods: {
            getNum(e) {
                this.num = e.detail.value;
            },
            toRecord() {
                if (!this.vid) return (this.showModal = true);
                const order_id = this.orderData[0].info.order_id;
                this.toUrl(`/pages/reserve/myRreserve?order_id=${order_id}`);
            },
            certainBtn() {
                let that = this;
                if (that.jump_pay == 2) {
                    that.showModal1 = false;
                    if (that.palyInfo.extraData) {
                        wx.openEmbeddedMiniProgram({
                            appId: that.palyInfo.appId,
                            extraData: that.palyInfo.extraData
                        });
                    } else {
                        uni.getProvider({
                            service: 'payment',
                            success(resp) {
                                uni.requestPayment({
                                    provider: resp.provider[0],
                                    orderInfo: {
                                        sncode_id: that.sncode_id
                                    },
                                    timeStamp: that.palyInfo.timeStamp,
                                    nonceStr: that.palyInfo.nonceStr,
                                    package: that.palyInfo.package,
                                    signType: that.palyInfo.signType,
                                    paySign: that.palyInfo.paySign,
                                    success(res) {
                                        uni.showToast({
                                            title: '支付成功',
                                            mask: true,
                                            icon: 'none',
                                            success() {
                                                setTimeout(() => {
                                                    uni.navigateBack({
                                                        delta: 1
                                                    });
                                                }, 800);
                                            }
                                        });
                                    },
                                    fail(err) {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                });
                            }
                        });
                    }
                } else {
                    uni.navigateTo({
                        url: '/pages/reserve/myRreserve'
                    });
                }
            },

            toStation() {
                let that = this;
                that.showSuccess = false;
                that.toUrl('/moneyPage/station/index');
            },
            openFile(url) {
                let that = this;
                // #ifdef H5
                window.location.href = that.baseUrl + url;
                // #endif
                // #ifndef H5
                uni.downloadFile({
                    url: that.baseUrl + url,
                    success: function (res) {
                        var filePath = res.tempFilePath;
                        uni.openDocument({
                            filePath: filePath,
                            success: function (res) {
                                console.log('打开文档成功');
                            }
                        });
                    }
                });
                // #endif
            },
            copy_text: function (copyData) {
                uni.setClipboardData({
                    data: copyData,
                    success: function () {
                        uni.showToast({
                            title: '复制成功！',
                            icon: 'success'
                        });
                    }
                });
            },
            getList() {
                this.list.forEach((item, index) => {
                    this.getFormStr(item.order_id, item.sncode_id);
                });
            },
            btnConfirm(e) {
                var indexf = e.indexf;
                var index = e.index;
                this.time = e.key;
                this.orderData[indexf].data[index].config_content = e.key;
            },
            btnConfirm1(e) {
                var indexf = e.indexf;
                var index = e.index;
                this.today = e.key;
                this.orderData[indexf].data[index].config_content = e.key;
            },
            btnConfirm2(e) {
                var indexf = e.indexf;
                var index = e.index;
                this.orderData[indexf].data[index].config_content = e.key;
            },
            btnCancel(e) {
                console.log(e);
            },
            dateChange(e) {
                var DATE = e.target.value;
                this.orderData[index_f].data[index].config_content = DATE;
            },
            timeChange(e) {
                var index = e.target.dataset.index;
                var index_f = e.target.dataset.indexf;
                var TIME = e.target.value;
                this.orderData[index_f].data[index].config_content = TIME;
            },
            showPicker: function (sx, index, index_f) {
                // 记录当前表单序列和当前表单项系列
                this.shixian = sx;
                this.indexs = [index, index_f];
            },
            showPicker1: function (sx, index, index_f) {
                this.shixian1 = sx;
                this.indexs = [index, index_f];
            },
            quxiaobutton: function () {
                this.shixian = false;
            },
            quxiaobutton1: function () {
                this.shixian1 = false;
            },
            quedingbutton: function (y, m, d) {
                this.shixian = false;
                this.inputValue = y + '-' + m + '-' + d;
                this.year = y;
                this.month = m;
                this.day = d;
                this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.inputValue;
            },
            quedingbutton1: function (h, m) {
                this.shixian1 = false;
                this.hour = h;
                this.minute = m;
                if (h < 9) h = '0' + h;
                if (m < 9) m = '0' + m;
                this.time = h + ':' + m;
                this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.time;
            },
            bindDateChange: function (event) {
                this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = event.target.value;
            },
            // 三级联动选择
            showAddPicker(index, index_f) {
                this.shixian2 = true;
                this.indexs = [index, index_f];
            },
            onCancel() {
                this.shixian2 = false;
            },
            onConfirm(e) {
                this.shixian2 = false;
                var add = e.label.replace(/-/g, '');
                this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = add;
            },
            // 下拉框
            showSelect(index, index_f) {
                //下拉框显示
                this.orderData[index_f].data[index].showSelect_ = true;
                this.indexs = [index, index_f];
            },
            chooseSel(index, index_f, option) {
                //下拉框选择
                this.orderData[index_f].data[index].showSelect_ = false;
                if (option) {
                    this.orderData[index_f].data[index].config_content = option;
                }
            },
            selectorChange(e) {
                var index_f = e.target.dataset.indexf;
                var index = e.target.dataset.index;
                var selector = e.target.value;
                this.orderData[index_f].data[index].config_content = this.orderData[index_f].data[index].options[selector];
            },
            // 复选框
            checkClick(index, index_f, index_check, checked, name) {
                // 复选框选择 2020.01.09 update
                var that = this;
                var chklist = that.orderData[index_f].data[index];
                if (chklist.config_content && typeof chklist.config_content != 'object') {
                    chklist.config_content = chklist.config_content.split(',');
                }
                if (chklist.config_content == '') {
                    chklist.config_content = [];
                }
                that.orderData[index_f].data[index].checkList[index_check].checked = !checked;
                if (checked) {
                    // 取消选择
                    chklist.config_content.forEach((chk, index_c) => {
                        if (chk == name) {
                            that.orderData[index_f].data[index].config_content.splice(index_c, 1);
                        }
                    });
                } else {
                    // 新增选择
                    that.orderData[index_f].data[index].config_content.splice(index_check, 0, name);
                }
            },
            //单选
            checkClick1(index, index_f, index_check, name) {
                //单选
                this.orderData[index_f].data[index].config_content = name;
            },
            // 文本域
            areaBlur(e, index, index_f) {
                this.orderData[index_f].data[index].config_content = e.detail.value;
            },
            // 上传图片
            //选择图片
            selectImage(index, index_f, limit) {
                var that = this;
                uni.chooseImage({
                    count: limit,
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'],
                    success: (res) => {
                        uni.showLoading({
                            title: '图片上传中'
                        });
                        that.loadingNow = true; // 图片正在上传
                        res.tempFilePaths.forEach((tempFilePath, tempIndex) => {
                            that.$common.uploadFile('/zzjApp/uploade?bid=' + that.bid, tempFilePath).then((res2) => {
                                var data = res2;
                                if (typeof res2 == 'string') {
                                    data = JSON.parse(data);
                                }
                                if (data.errcode == 100) {
                                    var imgItem;
                                    imgItem = data.url;
                                    imgItem = imgItem.substring(22, imgItem.length);
                                    if (that.orderData[index_f].data[index].imgs.length < limit) {
                                        that.orderData[index_f].data[index].imgs.push(imgItem);
                                    }
                                    if (that.orderData[index_f].data[index].imgs.length >= limit) {
                                        that.orderData[index_f].data[index].imgEn = false;
                                    }
                                    that.orderData = [].concat(that.orderData);
                                } else {
                                    uni.showToast({
                                        icon: 'none',
                                        title: data.msg + '!',
                                        duration: 2000
                                    });
                                }
                                uni.hideLoading();
                                that.loadingNow = false;
                            });
                        });
                    }
                });
            },
            del(index, index_f, i) {
                // 删除图片
                this.orderData[index_f].data[index].imgs.splice(i, 1);

                this.orderData[index_f].data[index].imgEn = true;
            },
            getFormStr(ordId, sncodeId = '') {
                // 获取自定义表单结构
                let that = this;
                that.$http
                    .get({
                        url: '/SRA_CustomerForm/customForm',
                        data: {
                            VeriCode: this.bid,
                            ordId: ordId,
                            sncodeId
                        }
                    })
                    .then((res) => {
                        if (res.code == 100) {
                            var obj = {};
                            this.ordInfo = res.data.ordInfo;
                            if (this.ordInfo.acknowledgeId && this.ordInfo.acknowledgeId > 0) this.articleInfo(this.ordInfo.acknowledgeId);
                            if (res.data.config) {
                                obj.data = res.data.config;
                                obj.data.forEach((item, index) => {
                                    if (item.config_type == 1 || item.config_type == 16) {
                                        // 文本框
                                        if (item.config_content) {
                                            item.place = item.config_content;
                                            item.config_content = '';
                                        }
                                    }
                                    if (item.config_type == 2) {
                                        // 下拉框
                                        item.showSelect_ = false;
                                        item.options = item.config_content.split('|');
                                        item.config_content = '';
                                    }
                                    if (item.config_type == 6) {
                                        // 选择地址
                                        item.pickered = item.config_content ? item.config_content : '请选择区县';
                                        item.config_content = '';
                                    }
                                    if (item.config_type == 7 && !item.config_content) {
                                        // 选择时间
                                        item.config_content = that.time;
                                    }
                                    if (item.config_type == 3) {
                                        // 选择日期
                                        // item.config_content = that.inputValue;
                                        item.config_pla = '请选择';
                                        if (item.config_content) {
                                            item.config_pla = item.config_content;
                                            item.config_content = '';
                                        }
                                    }
                                    if (item.config_type == 4 && item.config_content) {
                                        // 下拉框
                                        item.plac = item.config_content;
                                        item.config_content = '';
                                    }
                                    if (item.config_type == 8) {
                                        // 上传图片
                                        item.config_content = '';
                                        item.imgs = [];
                                        item.imgEn = true;
                                        item.limit = item.limit ? parseInt(item.limit) : 1;
                                    }
                                    if (item.config_type == 5 && item.config_content) {
                                        // 复选框
                                        item.checkList = item.config_content.split('|');
                                        item.checkList.forEach((check, index_) => {
                                            var check_ = {
                                                checked: false,
                                                name: check
                                            };
                                            item.config_content = [];
                                            item.checkList[index_] = check_;
                                        });
                                    }
                                    if (item.config_type == 9 && item.config_content) {
                                        // 单选框
                                        item.checkList = item.config_content.split('|');
                                        item.config_content = '';
                                        // item.config_content = item.checkList[0];
                                    }
                                });
                            }
                            var userInfo = res.data.userInfo;
                            if (userInfo) {
                                obj.data[0].config_content = userInfo.v_name;
                                obj.data[1].config_content = userInfo.v_tel;
                            }
                            obj.station = res.data.station;
                            if (res.data.ordInfo.order_content) {
                                res.data.ordInfo.order_content = that.$common.richTxt(res.data.ordInfo.order_content).html;
                            }
                            obj.info = res.data.ordInfo;
                            if (res.data.ordInfo.order_name) {
                                that.$emit('title', res.data.ordInfo.order_name);
                            }
                            if (res.data.ordInfo.share_img) {
                                that.$emit('shareImg', res.data.ordInfo.share_img);
                            }
                            if (res.data.ordInfo.imgs) {
                                obj.info.imgs = obj.info.imgs.split(',');
                            }
                            obj.info.verCode = '';
                            // obj.info.wrongTxt = '';
                            obj.info.btnTxt = '发送验证码';
                            obj.info.btnDisabled = false;
                            that.orderData.push(obj);
                            console.log(that.orderData, 'that.orderData');
                            if (that.barTitle == 1) {
                                uni.setNavigationBarTitle({
                                    title: obj.info.order_name ? obj.info.order_name : '信息提交'
                                });
                            }
                            that.v++;

                            // 补充表单
                            if (res.data.sncode_id) {
                                obj.sncode_id = res.data.sncode_id;
                                obj.data.forEach((item) => {
                                    if (item.value) item.config_content = item.value;
                                });
                            }
                        } else {
                            that.noData = true;
                            that.msg = res.data;
                        }
                    });
            },
            verifCode2: function (index, orderId) {
                // 发送验证码
                let that = this;
                var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
                var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
                if (phoneNumber == '') {
                    uni.showToast({
                        title: '联系电话不能为空！',
                        icon: 'none'
                    });
                    return false;
                }
                if (!phoneReg.test(phoneNumber) && phoneNumber != '') {
                    uni.showToast({
                        title: '手机号输入有误！',
                        icon: 'none'
                    });
                    return false;
                }
                if (that.orderData[index].info.btnDisabled) return;
                that.$http
                    .post({
                        url: '/SRA_CustomerForm/verification_code',
                        data: {
                            ordId: orderId,
                            phone: phoneNumber
                        }
                    })
                    .then((res) => {
                        if (res.code == 1000) {
                            // 提交成功
                            var cutdown = 60;
                            timer = setInterval(function () {
                                if (cutdown > 0) {
                                    cutdown--;
                                    that.orderData[index].info.btnTxt = '重新发送(' + cutdown + ')';
                                    that.orderData[index].info.btnDisabled = true;
                                } else {
                                    clearInterval(timer);
                                    that.orderData[index].info.btnTxt = '发送验证码';
                                    that.orderData[index].info.btnDisabled = false;
                                }
                            }, 1000);
                        }
                        if (res.code == 1001) {
                            uni.showToast({
                                title: res.cont,
                                icon: 'none'
                            });
                        }
                    });
            },

            reserveNow: function (index, orderId, form) {
                if (this.ordInfo.acknowledgeId > 0 && !this.agreement) return (this.showAgree = true);

                // 自定义表单提交
                let that = this;

                if (!this.vid) return (that.showModal = true);
                if (that.loadingNow) return; // 图片正在上传

                var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
                var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
                if (!phoneReg.test(phoneNumber) && phoneNumber != '') {
                    // that.orderData[index].info.wrongFlag = true;
                    // that.orderData[index].info.wrongTxt = '手机号输入有误！';
                    uni.showToast({
                        title: '手机号输入有误！',
                        icon: 'none'
                    });
                    return false;
                }
                var tokend = this.bid;
                var code = that.orderData[index].info.verCode;
                var params = {
                    VeriCode: tokend,
                    ordId: orderId,
                    jsCode: this.vid,
                    verification: code
                };
                if (form.sncode_id) params.sncodeId = form.sncode_id;
                let temp = that.orderData[index].data;
                for (var index1 = 0; index1 < temp.length; index1++) {
                    var item = temp[index1];
                    if (typeof item.config_content == 'object') {
                        // 复选
                        item.config_content = item.config_content.join(',');
                    }
                    if (item.config_type == 8 && item.imgs.length) {
                        // 上传图片
                        item.config_content = item.imgs.join(',');
                    }
                    if ((item.config_must == 1 || item.config_name == '用户姓名' || item.config_name == '联系电话') && item.config_content == '') {
                        uni.showToast({
                            title: item.config_name + '不能为空！',
                            icon: 'none'
                        });
                        return false;
                    }
                    if (item.config_type == 16) {
                        if (item.config_content < 1) return this.$Toast(item.config_name + '不能小于1');
                        if (item.config_content > parseFloat(item.other)) return this.$Toast(item.config_name + '不能超过' + item.other);
                        params.payNum = item.config_content;
                    }

                    // 复选
                    if (item.config_type == 5 && item.config_content && item.other > 0) {
                        const itemNum = item.config_content.split(',').length;
                        if (itemNum > item.other) return this.$Toast(`${item.config_name}最多选择${item.other}项`);
                    }
                    var name = 'name' + index1;
                    params[name] = item.config_content;
                }

                uni.showLoading({
                    title: '请稍等 ~'
                });
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/addFrom',
                        data: params
                    })
                    .then((res) => {
                        if (res.code == 100) {
                            // 提交成功
                            if (form.sncode_id) that.$emit('cancel');
                            that.sncode_id = res.sncode_id;
                            that.jump_pay = res.jump_pay;
                            that.orderData[index].data.forEach((item, index2) => {
                                that.orderData[index].data[index2].config_content = '';
                                that.orderData[index].data[index2].imgs = [];
                                that.orderData[index].info.verCode = '';
                                that.orderData[index].info.btnTxt = '发送验证码';
                                that.orderData[index].info.btnDisabled = true;
                            });
                            clearInterval(timer);
                            if (orderId == '2147') {
                                // 申请站长成功
                                that.showSuccess = true;
                            } else {
                                if (res.jump_pay == 0) {
                                    uni.hideLoading();
                                    that.modelTitle = res.data;
                                    that.btn1 = '确定';
                                    that.btn2 = '前往查看';
                                    that.success_img = res.success_img;
                                    if (!that.success_img) that.showModal1 = true;
                                } else if (res.jump_pay == 1) {
                                    uni.hideLoading();
                                    window.open(res.jump_url);
                                } else if (res.jump_pay == 2) {
                                    that.btn1 = '暂不支付';
                                    that.btn2 = '立即支付';
                                    that.getPlayinfo();
                                }
                            }
                        }
                        if (res.code == 101) {
                            uni.showToast({
                                title: res.data,
                                icon: 'none'
                            });
                            // that.orderData[index].info.wrongTxt = res.data;
                        }
                    });
            },

            //  获取支付信息
            getPlayinfo() {
                let that = this;
                that.$http
                    .post({
                        url: '/accountPay/getSncodePay',
                        data: {
                            sncode_id: that.sncode_id
                        }
                    })
                    .then((res) => {
                        uni.hideLoading();
                        if (res.code == '100') {
                            that.palyInfo = res.data;
                            that.showModal1 = true;
                        } else {
                            uni.showToast({
                                title: res.msg,
                                mask: true,
                                icon: 'none'
                            });
                        }
                    });
            },

            previewImage(i, imgArry) {
                let that = this;
                if (imgArry) {
                    let arr = [];
                    for (let i in imgArry) {
                        arr.push(that.$imgUrls(imgArry[i]));
                    }
                    uni.previewImage({
                        current: i,
                        urls: arr,
                        indicator: 'number',
                        loop: true
                    });
                }
            },
            articleInfo(website_article_id) {
                this.$http
                    .post({
                        url: '/zzjApp/articleInfo',
                        data: {
                            website_article_id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '00000') return this.$Toast(res.msg);
                        const result = res.data;
                        this.website_article_content = result.website_article_content;
                    });
            },
            agreeBtn() {
                this.showAgree = false;
                this.agreement = true;
            }
        },
        computed: {
            ...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'vid', 'share', 'bid'])
        }
    };
</script>
<style scoped lang="scss">
    .text-container {
        display: inline-block;
        width: 160rpx;
        color: #000;
    }
    .showAgrees {
        width: 100%;
        padding: 50rpx 30rpx;
        display: flex;
        flex-direction: column;

        .title {
            width: 100%;
            display: flex;
            justify-content: center;
            color: #000;
            font-size: 34rpx;
            padding-bottom: 30rpx;
        }

        .content {
            width: 100%;
            height: 800rpx;
            overflow-y: scroll;
        }

        .fpot {
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding-top: 50rpx;

            .btns {
                width: 270rpx;
                height: 90rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                border-radius: 10rpx;
            }

            .refuse {
                background-color: #f2f2f2;
                color: #333;
            }

            .agree {
                background-color: var(--color);
                color: #fff;
            }
        }
    }

    .agreementBox {
        width: 100%;
        display: flex;
        padding: 20rpx 0;

        .ahrNpx {
            width: 34rpx;
            height: 34rpx;
            border: 1px solid #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            margin-right: 20rpx;
            margin-top: 4rpx;

            .icon-xuanzhong {
                color: #fff;
            }
        }

        .Active {
            background-color: var(--color);
            border: 1px solid var(--color);
        }

        .acknowledgeText {
            color: #666;
            font-size: 26rpx;
        }
    }

    .nowBtn {
        height: 88rpx;
        border-radius: 44rpx;
        -webkit-border-radius: 44rpx;
        overflow: hidden;
    }

    .nowLeft {
        width: 270rpx;
    }

    .nowRigth {
        width: 360rpx;
    }

    .my-form {
        .orderInfo {
            background: white;

            .topMsg {
                padding: 0 30rpx;

                .infoContent {
                    padding: 10upx 0 30upx;

                    .infoName {
                        font-size: 36upx;
                        color: #333;
                        font-weight: bold;
                        line-height: 90upx;
                        border-bottom: 1px solid #eeeeeeee;
                    }

                    .info_item {
                        font-size: 24upx;
                        margin: 10upx 0;
                    }

                    .info_s {
                        margin: 20upx 0 10upx;
                        padding-top: 10upx;
                        border-top: 1px solid #eeeeee;
                    }
                }
            }

            table {
                width: 100% !important;
            }
        }

        // 下载
        .dowload_file_box {
            padding: 20rpx 24rpx;

            .dowload_file {
                margin-right: 20rpx;

                text {
                    display: inline-block;
                    color: white;
                    padding: 0 28rpx;
                    line-height: 54rpx;
                    text-decoration: underline;
                    border-radius: 40rpx;
                }
            }
        }

        // 图集
        .photoes {
            overflow-x: auto;
            white-space: nowrap;
            margin-top: 20rpx;
            padding: 0 $uni-page-space;

            .img_1 {
                width: 100%;
                height: 300rpx;
                border-radius: 8rpx;
            }

            .img_2 {
                width: calc(25% - 8rpx);
                margin-right: 10rpx;
                height: calc(25vw - 10rpx);
                border-radius: 8rpx;
                display: inline-block;
            }
        }

        // 申请站长成功
        .success-img-box {
            min-height: 100vh;
            overflow-y: auto;
            background-color: #ffffff;

            .success-img {
                width: 100vw;
            }
        }

        /* 预约试听 */
        .reserve-box {
            padding: 30rpx;

            .reserve {
                border-radius: 16upx;
                padding: 30upx 30upx 20upx;
                box-sizing: border-box;
                background: white;
                box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.12);

                .reserve-title {
                    color: #333333;
                    font-size: 36rpx;
                    position: relative;
                    text-align: center;
                }

                .reserve-title:before {
                    position: absolute;
                    content: '';
                    width: 40upx;
                    height: 2px;
                    top: calc(100% + 10px);
                    left: 50%;
                    transform: translateX(-50%);
                    background: #333333;
                }

                .form {
                    margin-top: 68upx;

                    .Required {
                        color: #fe1112 !important;
                        font-size: 30upx;
                        margin-right: 4upx;
                        padding: 0;
                        display: inline-block;
                        vertical-align: middle;
                        background: none;
                    }

                    .isKey {
                        color: #000000;
                    }

                    > view {
                        margin-bottom: 30rpx;
                    }

                    input {
                        height: 100%;
                        padding-left: 10upx;
                        font-size: 26rpx;
                        color: #333333;
                    }

                    .icon-xiasanjiaoxing {
                        color: #999999;
                        font-size: 28rpx;
                    }

                    // 1、单行文本框
                    .text_input {
                        background: #f2f2f2;
                        border-radius: 10rpx;
                        line-height: 88rpx;
                        height: 88rpx;
                        display: flex;
                        padding: 0 20rpx;

                        .form-ipt {
                            border: none;
                            outline: none;
                            flex: 1;
                            background: none;
                            font-size: 24rpx;
                        }

                        .pla {
                            color: #999999;
                        }
                    }

                    // 3、验证码
                    .Veri_Code {
                        background: white;
                        height: 88rpx;
                        display: flex;

                        .inputBox {
                            background: #f2f2f2;
                            border-radius: 10rpx;
                            padding-left: 20rpx;
                            align-items: center;
                        }

                        /* 发送验证码 */
                        .sendCode {
                            margin-left: 20rpx;
                            border-radius: 10rpx;
                            outline: none;
                            box-sizing: border-box;
                            color: white;
                            line-height: 88rpx;
                            font-size: 28rpx;
                            width: 250rpx;
                        }
                    }

                    // 2、选择日期  4、选择时间  5、选择地址 6、下拉框 11、选择时间 (可配置类型)
                    .drop_select {
                        border: 1px solid #d8d8d8;
                        height: 88rpx;
                        display: flex;
                        border-radius: 10rpx;

                        .picker {
                            width: 100%;
                            height: 88rpx;
                            display: flex;
                            align-items: center;
                            padding: 0 20rpx;

                            .flex {
                                color: #999999;
                            }

                            .isKey {
                                color: #000000;
                            }
                        }
                    }

                    // 7、复选框
                    .mulitSelect {
                        display: flex;
                        padding-left: 20rpx;

                        .checkList {
                            display: flex;
                            flex-wrap: wrap;
                            margin-bottom: -14rpx;

                            .checkItem {
                                margin-right: 20rpx;
                                margin-bottom: 14rpx;
                                display: flex;
                                align-items: center;

                                .checkIcon {
                                    border-radius: 6rpx;
                                    width: 30rpx;
                                    height: 30rpx;
                                    display: flex;
                                    align-items: center;

                                    .icon-xuanzhong {
                                        font-size: 26rpx;
                                    }
                                }

                                .name {
                                    color: #666666;
                                    margin-left: 8rpx;
                                }
                            }
                        }
                    }

                    // 8、单选框
                    .singleSelect {
                        display: flex;
                        padding-left: 20rpx;

                        .checkList {
                            display: flex;
                            flex-wrap: wrap;
                            margin-bottom: -14rpx;

                            .checkItem {
                                margin-right: 20rpx;
                                margin-bottom: 14rpx;
                                display: flex;
                                align-items: center;

                                .checkIcon_ {
                                    border-radius: 50%;
                                    width: 32upx;
                                    height: 32upx;
                                    display: inline-block;
                                    box-sizing: border-box;
                                    border: 1px solid #d8d8d8;
                                    position: relative;

                                    text {
                                        width: 16upx;
                                        height: 16upx;
                                        border-radius: 50%;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                    }

                                    .grayBg {
                                        background: #d8d8d8;
                                    }
                                }

                                .name {
                                    color: #666666;
                                    margin-left: 6rpx;
                                }
                            }
                        }
                    }

                    // 9、上传图片
                    .uploadImg {
                        .phone-box {
                            flex-wrap: wrap;
                            margin-top: 20rpx;
                            margin-bottom: -20rpx;

                            .upBox {
                                width: 196upx;
                                height: 196upx;
                                border-radius: 10rpx;
                                position: relative;

                                &:nth-of-type(3n-1) {
                                    margin: 0 20rpx;
                                }

                                margin-bottom: 20rpx;

                                .upIcon {
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 10rpx;
                                }

                                .delImg {
                                    position: absolute;
                                    z-index: 22;
                                    width: 32rpx;
                                    height: 32rpx;
                                    top: -16rpx;
                                    right: -16rpx;
                                    border-radius: 50%;

                                    image {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                    }

                    // 10、文本域
                    .areaBox {
                        .textArea {
                            background-color: #f5f5f5;
                            padding: 20rpx;
                            font-size: 24rpx;
                            height: 196rpx;
                            z-index: 0 !important;
                            color: rgb(51, 51, 51);
                            border-radius: 10rpx;
                            margin-top: 10rpx;
                        }
                    }

                    .wrong {
                        color: #fe1112;
                        padding-left: 16rpx;
                        line-height: 40upx;
                        margin-bottom: 20upx;
                    }

                    /* 立即预约 */
                    .reserveNow {
                        font-size: 32upx;
                        color: white;
                        height: 88upx;
                        line-height: 88upx;
                        border-radius: 44upx;
                        border: none;
                        outline: none;
                        position: relative;
                        background-color: #d8d8d8;
                    }
                }
            }
        }
    }
</style>
